<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props的基本使用</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <div id="app1"></div>
    <script type="text/babel">
        class Person extends React.Component{
            render(){
                let {name, age, gender} = this.props
                //this.props.age = 99  //会报错，props对象中的属性是只读的
                age = 99
                return (
                    <ul>
                        <li>name: {name}</li>
                        <li>age: {age}</li>
                        <li>gender: {gender}</li>
                    </ul>
                )
            }
        }
        //  分别传递标签属性
        ReactDOM.render(<Person name='lucy' age='46' gender='women'/>,document.querySelector('#app'))

        //打包传入标签属性
        const data = {
            name: 'Andy',
            age: 56,
            gender: 'man'
        }
        ReactDOM.render(<Person {...data}/>,document.querySelector('#app1'))
        console.log('$$$', ...data)
    </script>
</body>
</html>